<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <ul>
          <li v-for="datas in data" :key="datas">
            <el-button @click="GetDetail(datas.Id)">{{ datas.Id }}.{{ datas.Title }}</el-button>
          </li>
        </ul>
      </el-aside>
      <el-main>
        <div v-html="content"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {GetArticle, GetArticleDetail} from '@/api/article';

export default {
  data() {
    return {
      data: [],
      content: "",
    }
  },
  mounted() {
    GetArticle().then((response) => {
      this.data = response.data;
    }).catch((error) => {
      console.log(error);
    });
  },
  methods: {
    GetDetail(id) {
      GetArticleDetail(id).then((response) => {
        this.content = response.data
      }).catch((error) => {
        console.log(error);
      });
    }
  },
}


</script>

<style scoped>
.el-aside {
  overflow: auto;
  height: 10%;
}

li {
  list-style: none;
}
</style>

